
<template>
  <div class="play-box" @click="getlist(msg)"> 
    <div class="top">
      <div class="img-box">
        <img :src="msg.picUrl" alt />
      </div>
      <div class="top-next">
        <span>
          <!-- <van-icon name="audio" />xxx -->
          <i class="iconfont icon-yinle"></i>
          {{playCount}}
        </span>
      </div>
    </div>
    <div class="weizi">{{msg.name}}</div>
  </div>
</template>
<script>
export default {
  props: ["msg"],
  computed: {
    playCount() {
      return this.addChineseUnit(this.msg.playCount);
    }
  },
  created() {
  },
  methods: {
    addWan(integer, number, mutiple, decimalDigit) {
      var me = this;
      var digit = me.getDigit(integer);
      if (digit > 3) {
        var remainder = digit % 8;
        if (remainder >= 5) {
          // ‘十万’、‘百万’、‘千万’显示为‘万’
          remainder = 4;
        }
        return (
          Math.round(
            number / Math.pow(10, remainder + mutiple - decimalDigit)
          ) /
            Math.pow(10, decimalDigit) +
          "万"
        );
      } else {
        return (
          Math.round(number / Math.pow(10, mutiple - decimalDigit)) /
          Math.pow(10, decimalDigit)
        );
      }
    },
    getDigit(integer) {
      var digit = -1;
      while (integer >= 1) {
        digit++;
        integer = integer / 10;
      }
      return digit;
    },
    addChineseUnit(number, decimalDigit) {
      var me = this;
      decimalDigit = decimalDigit == null ? 2 : decimalDigit;
      var integer = Math.floor(number);
      var digit = me.getDigit(integer);
      // ['个', '十', '百', '千', '万', '十万', '百万', '千万'];
      var unit = [];
      if (digit > 3) {
        var multiple = Math.floor(digit / 8);
        if (multiple >= 1) {
          var tmp = Math.round(integer / Math.pow(10, 8 * multiple));
          unit.push(me.addWan(tmp, number, 8 * multiple, decimalDigit));
          for (var i = 0; i < multiple; i++) {
            unit.push("亿");
          }
          return unit.join("");
        } else {
          return me.addWan(integer, number, 0, decimalDigit);
        }
      } else {
        return number;
      }
    },
    getlist(msg){
      console.log(111)
      this.$router.push({
        name:"showlist",
        query:{
          id:msg.id,
          name:msg.name
        }
      })
    }
  }
};
</script>
<style lang="scss">
.top {
  position: relative;
  .img-box {
    width: 32.93333vw;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .top-next {
    position: absolute;
    top: 4px;
    right: 9px;
    color: white;
    font-size: 12px;
    font-weight: 500;
  }
}
  .play-box {
    width: 32.93333vw;
    .weizi {
       width: 124px;
    text-align: start;
    font-size: 14px;
    padding: 0 5px 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    }
  }
</style>
